<template>
    <div id="cpSet">
        <div id="modle">
            <el-dialog :title="title" class="dialogAdd" width="600px"   :visible.sync="dialogAddgsVisible"  @close="closeDialogAddgsVisible">
                <el-form :model="addForm" :rules="rules" ref="addForm" style="margin-right: 20px;" label-position="right" label-width="110px">
                    <el-form-item label="库存:"  prop="stock">
                        <el-input   placeholder="请输入内容" v-model="addForm.stock"></el-input>
                    </el-form-item>
                    <el-form-item label="菜名:"  prop="goodsClassifyName">
                        <el-input   placeholder="请输入内容" v-model="addForm.goodsClassifyName"></el-input>
                    </el-form-item>
                    <el-form-item label="类型:" prop="goodsUnitsName" >
                        <el-input   placeholder="请输入内容" v-model="addForm.goodsUnitsName"></el-input>
                    </el-form-item>
                    <el-form-item label="价格:" prop="price" >
                        <el-input   placeholder="请输入内容" v-model="addForm.price"></el-input>
                    </el-form-item>
                    <el-form-item label="创建人:" prop="createBy" >
                        <el-input   placeholder="请输入内容" v-model="addForm.createBy"></el-input>
                    </el-form-item>
                    <el-form-item label="更新时间:" prop="createTime" >
                        <el-input   placeholder="请输入内容" v-model="addForm.createTime"></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button size="mini" @click="dialogAddgsVisible = false">取 消</el-button>
                    <el-button size="mini" type="primary" @click="saveAddForm">确 定</el-button>
                </div>
            </el-dialog>

        </div>
        <div id="modle1">
            <el-dialog :title="title1"  width="600px"   :visible.sync="dialogAddgsVisible1">
                <el-form :model="xiuForm" :rules="xiuRules" ref="xiuForm" style="margin-right: 20px;" label-position="right" label-width="110px">
                    <el-form-item label="价格:"  prop="price">
                        <el-input   placeholder="请输入内容" v-model="xiuForm.price"></el-input>
                    </el-form-item>
                    <el-form-item label="数量:" prop="stock" >
                        <el-input   placeholder="请输入内容" v-model="xiuForm.stock"></el-input>
                    </el-form-item>
                    <el-form-item label="更改人:" prop="updateBy" >
                        <el-input   placeholder="请输入内容" v-model="xiuForm.updateBy"></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button size="mini" @click="dialogAddgsVisible1 = false">取 消</el-button>
                    <el-button size="mini" type="primary" @click="saveXiuForm">确定修改</el-button>
                </div>
            </el-dialog>

        </div>
        <el-card class="filter-container" shadow="never">
            <div>
                <i class="el-icon-search"></i>
                <span>筛选搜索</span>
                <el-button style="float:right" type="primary" @click="chaXun2" size="small">查询搜索</el-button>
                <el-button
                        style="float:right;margin-right: 15px"
                        @click="handleResetSearch()"
                        size="small"
                >重置</el-button>
            </div>
            <div style="margin-top: 15px">
                <el-form :inline="true" :model="formInline" class="demo-form-inline">
                    <el-form-item label="">
                        <el-select v-model="formInline.region" placeholder="菜名" ref="Option">
                            <el-option label="菜名" value="shanghai"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="搜索内容">
                        <el-input v-model="formInline.user" ref="Title2" placeholder="请输入搜索内容"></el-input>
                    </el-form-item>
                </el-form>
            </div>
        </el-card>
        <el-card class="operate-container" shadow="never">
            <i class="el-icon-tickets"></i>
            <span>数据列表</span>
            <el-button size="mini" class="btn-add" @click="handleSelectProduct()" style="float:right">添加商品</el-button>
        </el-card>

        <div id="myTable">
            <el-table
                    :data="page_arrs"
                    border
                    style="width: 100%;height: 278px">
                <el-table-column
                        prop="id"
                        label="编号"
                >
                </el-table-column>
                <el-table-column
                        prop="goodsClassifyName"
                        label="消耗品分类名称"
                >
                </el-table-column>
                <el-table-column
                        prop="goodsUnitsName"
                        label="消耗品计量单位"
                >
                </el-table-column>
                <el-table-column
                        prop="stock"
                        label="商品库存"
                >
                </el-table-column>
                <el-table-column
                        prop="price"
                        label="商品价格"
                >
                </el-table-column>
                <el-table-column
                        prop="createTime"
                        label="创建时间"
                        :formatter="dateTime"
                >
                </el-table-column>
                <el-table-column
                        prop="createBy"
                        label="创建人"
                >
                </el-table-column>
                <el-table-column
                        label="操作"
                >
                    <template slot-scope="scope">
                        <el-button  size="small" @click="xiuGai(scope.$index,scope.row)">修改</el-button>
                        <el-button type="danger" size="small" @click="delTable(scope.$index,scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="yeJiao" ref="Table1">
                <el-pagination
                        background
                        hide-on-single-page
                        layout="prev,pager,next"
                        :total="pageNum"
                        :page-size="4"
                        :pager-count="7"
                        :current-page="currentPage"
                        @current-change="currentChange"
                >
                </el-pagination>
            </div>
        </div>
    </div>
</template>

<script>
    import $ from "jquery";

    export default {
        name: "XHset",
        data() {
            return {
                xhrData: [],
                formInline:{
                    user:"",
                    region:"",
                    search:''
                },
                currentPage: 1,
                title1:'',
                dialogAddgsVisible1:false,
                xiuRules: {
                    createBy: [
                        {required: true, message: "请输入修改人", trigger: "blur"},
                        {min: 2, max: 5, message: "长度在 2 到 5 个字符", trigger: "blur"}
                    ],
                    price: [
                        {required: true, message: "请输入价格", trigger: "blur"},
                        {min: 1,max:1000, message: "请输入数字", trigger: "blur"}
                    ],
                    stock: [
                        {required:true, message: "请输入数量", trigger: "blur"},
                        {min: 1, max: 200, message: "请设置价格大于1的数字", trigger: "blur"}
                    ],
                },
                dialogAddgsVisible:false,
                title:'',
                rules: {
                    goodsClassifyName: [
                        {required: true, message: "请输入活动名称", trigger: "blur"},
                        {min: 2, max: 5, message: "长度在 2 到 5 个字符", trigger: "blur"}
                    ],
                    goodsUnitsName: [
                        {required: true, message: "请输入菜品计量单位", trigger: "blur"},
                        {min: 1, max: 3, message: "长度在 1到 3个字符", trigger: "blur"}
                    ],
                    id: [
                        {required: true, message: "请输入编号", trigger: "blur"},
                        {min: 1, message: "请输入数字编号", trigger: "blur"}
                    ],
                    stock: [
                        {required:true, message: "请输入数量", trigger: "blur"},
                        {min: 1, max: 200, message: "请设置价格大于1的数字", trigger: "blur"}
                    ],
                },
                xiuForm:{
                    id:'',
                    goodsClassifyName: '',
                    goodsUnitsName: '',
                    stock: '',
                    createTime:'',
                    createBy:'',
                    updateTime:'',
                    updateBy:''
                },
                addForm:{
                    id:'',
                    goodsClassifyName: '',
                    goodsUnitsName: '',
                    stock: '',
                    createTime:'',
                    createBy:'',
                    updateTime:'',
                    updateBy:''
                }
            }
        },
        computed:{
            //渲染的数据
            page_arrs(){
                let kaishi=this.currentPage*4-3;
                let jieshu=this.currentPage*4;
                return this.xhrData.slice(kaishi-1,jieshu)
            },
            pageNum(){
                return this.xhrData.length
            }
        },
        created() {
           this.xuanRan()
        },
            methods:{
                //获取时间的方法
                Timer() {
                    let now = new Date();
                    let year = now.getFullYear();
                    let month = now.getMonth() + 1;
                    let day = now.getDate();
                    let riqi = year + "-";
                    if (month < 10) riqi += "0";
                    riqi += month + "-";
                    if (day < 10) riqi += "0";
                    riqi += day;
                    return riqi;
                },
            xuanRan(){
                //页面加载，进行渲染
                this.$axios({
                    url:'/mgrsite/Admin/selectDepotGoods',
                    method:'post',
                }).then(res=>{
                    this.xhrData=res.data
                })
            },
            //删除每一条数据
                delTable(index,row){ this.$confirm("删除后不可恢复, 是否继续?", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                })
                    .then(() => {
                        // 这里发起axios请求（提示删除是否成功）
                        this.$axios({
                            url: "/mgrsite/Admin/deleteGoodsById",
                            method: "post",
                            data: {
                                "id":row.id
                            }
                        }).then(res => {
                            console.log(res)
                            if (res.status === 200) {
                                this.$message({
                                    type: "success",
                                    message: "删除成功!"
                                });
                                this.xuanRan()
                            } else {
                                this.$message({
                                    type: "error",
                                    message: "删除失败!"
                                });
                            }
                        });
                    })
                    .catch(() => {
                        this.$message({
                            type: "info",
                            message: "已取消删除"
                        });
                    });

                },
                //添加商品
                handleSelectProduct(){
                    this.dialogAddgsVisible = true;
                    this.title="添加"
                    this.addForm.createTime=this.Timer();
                },
                //进行重置的方法
                handleResetSearch(){
                    this.formInline.user = "";
                    this.formInline.region = "";
                },
                //改变当前页的方法
                currentChange(val){
                    this.currentPage=val;
                },
                     //修改数据
                     xiuGai(index,row){
                         this.dialogAddgsVisible1 = true;
                         this.title1="修改"
                         this.xiuForm=row
                     }
                 ,
                //点击查询按钮的函数
                chaXun2(){
                    if(this.formInline.user==''){

                        this.$message({
                            message:'搜索内容不能为空'
                        })
                    }else {
                        this.$axios({
                            url:'/mgrsite/Admin/selectDepotGoodsByName',
                            method:'post',
                            data:{
                               "goodsClassifyName":this.formInline.user
                            }
                        }).then(res=>{
                            if(res.data==''){
                                this.$message({
                                    type:'warning',
                                    message:'您搜索的内容为空，请重新输入!'
                                })
                            }else {
                                this.xhrData=res.data;
                            }
                        })
                    }
                },
                //当点击取消和确认的时候，模态框里的值全部清空
                closeDialogAddgsVisible(){
                    this.$refs.addForm.resetFields();//element封装的方法,清空模态框的值
                    this.title="" //初始化title的值
                    this.addForm={//初始化addForm中的值
                        id:'',
                        goodsClassifyName: '',
                        goodsUnitsName: '',
                        stock: '',
                        createTime:'',
                        createBy:'',
                        updateTime:'',
                        updateBy:''
                    }
                },
                //渲染的时候，页面日期
                dateTime(row) {
                    let datetime = row.createTime;
                    if (datetime) {
                        datetime = new Date(datetime);
                        let y = datetime.getFullYear() + "-";
                        let mon = datetime.getMonth() + 1 + "-";
                        let d = datetime.getDate();
                        return y + mon + d;
                    }
                    return "";
                },
                saveXiuForm(){
                    this.$axios({
                        url:'/mgrsite/Admin/updateStockById',
                        method:'post',
                        data:{
                            "id":this.xiuForm.id,
                            "price":this.xiuForm.price,
                            "updateBy":this.xiuForm.updateBy,
                            "stock":this.xiuForm.stock,}
                    }).then(res=>{
                        if(this.xiuForm.price==''||this.xiuForm.createBy==''||this.xiuForm.stock==''){

                            this.$message({
                                message:'不能为空，请输入修改数据'
                            })
                        }else {
                            if(res.status==200){
                                this.xuanRan()
                            }

                        }
                    })

                },
                //模态框内新增内容保存
                saveAddForm() {
                    if (this.addForm.price == '' || this.addForm.goodsClassifyName == '' || this.addForm.goodsUnitsName == '' || this.addForm.stock == '') {
                        this.$message({
                            message: '不能为空，请添加数据'
                        })
                    } else {
                        this.$axios({
                            url: '/mgrsite/Admin/insertGoods',
                            method: 'post',
                            data: {
                                // goodsUnitsName,goodsClassifyName,stock,supplier,price,createTime,createBy
                                // "delFlag": true,
                                "id": this.addForm.id,
                                "price": this.addForm.price,
                                "goodsClassifyName": this.addForm.goodsClassifyName,
                                "stock": this.addForm.stock,
                                "createBy": this.addForm.createBy,
                                "updateBy": this.addForm.updateBy,
                                "createTime": this.addForm.createTime,
                                "goodsUnitsName":this.addForm.goodsUnitsName,
                            }
                        }).then(res => {
                            this.$message({
                                message: '添加成功'
                            })
                            this.xuanRan()
                        }).catch(error=>{
                            console.log(error)
                        })
                    }
                }
            }
    }
</script>

<style scoped lang="less">
    #souSuo{
        text-align: left;
    input{
        height:30px;
        margin-right: 20px;
        width: 300px;
    }
    }
    .yeJiao{
        position: absolute;
        left: 50%;
    }
    .operate-container{
        margin: 15px 0;
    }
</style>